<template>
  <el-row :gutter="10">
    <el-col :span="12">
      project.json 
      <el-button type="" @click="downNavi">下载导航</el-button>
      <el-button type="" @click="uploadNavi">导出导航</el-button>
      <el-input
        v-model="show.navi"
        v-bind="tempProps"
      ></el-input>
    </el-col>
    <el-col :span="12">
      menu.json 
      <el-button type="" @click="downMenu">下载菜单</el-button>
      <el-button type="" @click="uploadMenu">导出菜单</el-button>
      <el-input
        v-model="show.menu"
        v-bind="tempProps"
      ></el-input>
    </el-col>
  </el-row>
  
</template>

<script>
  import { toRaw, reactive, watch } from 'vue'
  import { ElInput, ElRow, ElCol, ElButton } from 'element-plus'
  // 状态
  import { store } from '@naturefw/nf-state'
  // 上传
  import upload from '../service/upload.js'
  // 下载
  import myDown from '../service/download.js'

  const tempProps = {
    rows: 40,
    type: "textarea",
  }

</script>

<script setup>

  // 当前的一些设置
  const {
    current,
    projectInfo, 
    naviList, // 设置导航
    menuList // 设置菜单
  } = store

  // 变成字符串的形似
  const show = reactive({
    navi: '',
    menu: ''
  })

  // 导航用的json对象
  const _navi = reactive({
    projectId: projectInfo.projectId,
    title: projectInfo.title,
    description: projectInfo.description,
    navi: toRaw(naviList)
  })

  // 监听导航变化
  watch(naviList, () => {
    _navi.projectId = projectInfo.projectId
    _navi.title = projectInfo.title
    _navi.description = projectInfo.description
    _navi.navi = toRaw(naviList)
    show.navi = JSON.stringify(_navi, null, 2)
  }, {immediate: true})

  // 监听菜单变化
  watch(menuList, () => {
    show.menu = JSON.stringify(menuList, null, 2)
  }, {immediate: true})

  // 下载 导航
  const downNavi = () => {
    //encodeURIComponent解决中文乱码
    const uri = 'data:text/json;charset=utf-8,\ufeff' + encodeURIComponent(show.navi)
    // 获取菜单名称
    myDown(uri, 'project.json')
  }

  // 下载 菜单
  const downMenu = () => {
    //encodeURIComponent解决中文乱码
    const uri = 'data:text/json;charset=utf-8,\ufeff' + encodeURIComponent(show.menu)
    myDown(uri, 'menu.json')
  }
 
  // 上传导航
  const uploadNavi = () => {
    const file = {
      name: 'project.json',
      navi: show.navi
    }
    upload('navi', file)
  }

  // 上传菜单
  const uploadMenu = () => {
    const file = {
      name: 'menu.json',
      menu: show.menu
    }
    upload('menu', file)
  }
  
</script>